Mr笔记

Appearance

S14-03 SSR-Nuxt3-项目：mr-ssr-nuxt3-ts-oppo ​

[TOC]

image-20240911153127538

接口文档 ​

baseURL

首页信息 ​

说明 : 调用此接口 , 获取首页商品信息

请求方法 : GET

接口地址 : /home/info

可选参数 :

type: 商品类型，支持： oppo 、onePlus、intelligent, 默认是oppo

调用例子 : baseURL + /home/info?type=oppo

json
{
  "code": 200,
  "data": {
    "navbars": [],
    "banners": [],
    "categorys": []
  }
}

商品详情 ​

说明 : 调用此接口 , 获取商品详情信息

请求方法 : GET

接口地址 : /oppoDetail

可选参数 :

json
type: 类型：oppo 、air、watch、tablet, 默认是oppo

调用例子 : baseURL + /oppoDetail?type=oppo

json
{
    "code": 200,
    "data": [
        {
            "id": 19978,
            "title": "Enco X 系列",
            "productDetailss": [
                {
                      "categoryCode": "000020",
                    "id": 21452,
                    "title": "OPPO Enco X2 镜夜黑 有线充版",
                    "marketingText": "45dB 降噪深度",
                    "skuId": 8687,
                    "skuName": "OPPO Enco X2 镜夜黑 有线充版",
                    .....
                }
            ]
        }
    ]
}

环境搭建 ​

项目初始化 ​

hs
pnpm dlx nuxi init mr-ssr-nuxt3-oppo

集成-样式@ ​

依赖包：

  • normalize.css
    • 安装：pnpm i normalize.css
  • sass
    • 安装：pnpm i sass

配置： 全局引入 normalize.css

image-20241010180810701

自定义全局样式：

global.scss

1、定义全局样式global.scss

image-20241010181141696

2、添加配置，使全局有效

image-20241010181217352

variables.scss

1、定义全局样式变量

image-20241010221114657

2、设置配置，自动导入全局样式变量

image-20241010221119594

3、在组件中使用变量、混合

image-20241010221524809

代码片段 ​

image-20241010222709957

image-20241010222910582

集成-ElementPlus2@ ​

Element Plus 官网：https://element-plus.org/zh-CN/guide/quickstart.html

安装文档：https://nuxt.com.cn/modules/element-plus

依赖包：

  • element-plus
    • 安装：pnpm i element-plus
  • @element-plus/nuxt
    • 安装：pnpm i @element-plus/nuxt -D

步骤：

1、安装依赖包

2、在nuxt.config.ts中设置配置

ts
export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],

  elementPlus: {
    /** Options */
    icon: 'ElIcon',
    importStyle: 'scss',
    themes: ['dark']
  }
})

早期配置：组件中使用需要手动导入

image-20240911153143796

3、在组件中使用 element-plus 组件，【是否是自动导入？】

html
<template>
  <el-button @click="ElMessage('hello')">button</el-button>
  <ElButton :icon="ElIconEditPen" type="success">button</ElButton>
  <LazyElButton type="warning">lazy button</LazyElButton>
</template>

Options：

【TODO】

SEO@ ​

image-20241011103826787

404 处理@ ​

在pages目录中创建[...slug].vue页面，匹配所有找不到页面的路由

image-20241011104140000

网络请求封装@ ​

ts
import type { AsyncData, UseFetchOptions } from 'nuxt/dist/app/composables'

const BASE_URL = 'http://codercba.com:9060/oppo-nuxt/api/'
type Methods = 'GET' | 'POST'

export interface IResultData<T> {
  code: number
  data: T
}

class HYRequest {
  request<T = any>(
    url: string,
    method: Methods,
    data?: any,
    options?: UseFetchOptions<T>
  ): Promise<AsyncData<T, Error>> {
    return new Promise((resolve, reject) => {
      const newOptions: UseFetchOptions<T> = {
        baseURL: BASE_URL,
        method: method,
        ...options
      }

      if (method === 'GET') {
        newOptions.query = data
      }
      if (method === 'POST') {
        newOptions.body = data
      }
      useFetch<T>(url, newOptions as any)
        .then((res) => {
          resolve(res as AsyncData<T, Error>)
        })
        .catch((error) => {
          reject(error)
        })
    })
  }

  get<T = any>(url: string, params?: any, options?: UseFetchOptions<T>) {
    return this.request<T>(url, 'GET', params, options)
  }

  post<T = any>(url: string, data?: any, options?: UseFetchOptions<T>) {
    return this.request<T>(url, 'POST', data, options)
  }
}

export default new HYRequest()

使用

ts
import hyRequest from './index'
import type { IResultData } from './index'
import { IHomeState } from '@/store/home'
export type IHomeInfoType = 'oppo' | 'onePlus' | 'intelligent' //  oppo 、onePlus、intelligent

export const getHomeInfo = (type: IHomeInfoType) => {
  return hyRequest.get<IResultData<IHomeState>>('/home/info', {
    type: type || 'oppo'
  })
}

集成-Pinia ​

依赖包：

  • pinia
    • 安装：pnmp i pinia，有冲突则添加--force
  • @pinia/nuxt
    • 安装：pnmp i @pinia/nuxt

步骤：

1、安装依赖包

2、配置：nuxt.config.ts

image-20241011120211297

Layout ​

接口 ​

说明 : 调用此接口 , 获取首页商品信息

请求方法 : GET

接口地址 : /home/info

可选参数 :

type: 商品类型，支持： oppo 、onePlus、intelligent, 默认是oppo

调用例子 : baseURL + /home/info?type=oppo

json
{
  "code": 200,
  "data": {
    "navbars": [],
    "banners": [],
    "categorys": []
  }
}

image-20241011114328602

Layout

1、在项目的layout/default.vue中编写 layout

image-20241010223635632

2、创建components/app-header/index.vue组件

3、创建components/app-footer/index.vue组件

image-20241010223618669

4、在app.vue中使用 layout

image-20241010223605345

组件：app-header ​

image-20241010224607322

页面布局 ​

image-20241010225122890

功能 ​

字体图标@ ​

必须文件：

  • iconfont.css
  • iconfont.ttf

iconfont.css

1、修改字体文件路径

image-20241011100944258

2、配置全局应用字体图标样式

image-20241011101403266

3、在组件中使用字体图标

image-20241011103401394

自定义布局@ ​

1、在layout目录创建empty-layout.vue页面

image-20241011105055417

2、在login/index.vue和register/index.vue中指定使用自定义的布局

image-20241011105105937

image-20241011105129353

3、效果

image-20241011105219626

image-20241011171813873

组件：navbar ​

image-20241011105915905

页面布局 ​

1、页面布局

image-20241011112505396

2、在 layout 中使用组件

image-20241011110430028

请求数据@ ​

1、server：在server/home.ts中发送请求

image-20241011122625754

2、store：在store/home.ts中发送异步请求

image-20241011122606440

TS 类型： 为请求的数据定义 TS 类型

image-20241011122146389

3、组件：在~/layouts/default.vue中触发 store 中的 action

image-20241011122854860

功能 ​

渲染数据 ​

1、在~/layouts/default.vue中获取 store 中的数据，并传递给navbar组件

image-20241011124044769

2、在navbar组件中接收数据，并渲染

image-20241011124227215

切换标签 ​

1、在navbar组件中添加点击事件

image-20241011124506275

2、实现点击事件，切换标签

image-20241011124516790

路由跳转-组件式 ​

1、在navbar组件中为链接的to属性添加动态获取 path 的方法getPagePath(item)

image-20241011130403932

2、实现getPagePath(item)方法，完成路由跳转

image-20241011130355851

页面布局 ​

1、使用组件

image-20241011112445132

2、在components/search/index.vue中创建组件

image-20241011112242180

login【 ​

页面布局 ​

1、点击跳转到 login 页面

image-20241011105310267

register【 ​

home ​

页面布局 ​

组件：swiper ​

image-20241011153630359

页面布局 ​

1、使用组件

image-20241011152810219

2、接收 props，并渲染

image-20241011152839929

功能 ​

指示器 ​

image-20241011153602429

image-20241011153606201

组件：tab-category ​

image-20241011153747070

页面布局 ​

1、使用组件

image-20241011154543857

2、接收数据，并渲染

image-20241011154922887

image-20241011155005608

功能 ​

路由跳转-编程式 ​

1、定义点击事件handleItemClick()，向外发射itemClick事件

image-20241011155659711

image-20241011155716471

2、在外部接收itemClick事件

image-20241011155729867

image-20241011155825978

组件：section-category ​

image-20241011160310189

页面布局 ​

1、使用组件

image-20241011171319041

2、页面布局

image-20241011171355408

image-20241011171358806

组件：section-title ​

image-20241011160248989

页面布局 ​

1、使用组件

image-20241011160204302

2、页面布局

image-20241011160153190

组件：grid-view ​

页面布局 ​

1、使用组件

image-20241011162235310

2、页面布局

image-20241011162301559

组件：grid-view-item ​

1、使用组件

image-20241011163825348

2、页面布局

image-20241011163749711

image-20241011163812831

功能 ​
第一个 item ​

1、使用组件：传递参数category-url

image-20241011170003498

2、页面布局：接收参数并渲染

image-20241011170020776

image-20241011165943022

3、控制第一个 item 是否显示

image-20241011170215562

添加插槽 ​

image-20241011170423274

其他页 ​

onePlus ​

注意

该页面结构和 home 页基本一致，很多组件都可以复用

image-20241011172856004

intelligent ​

image-20241011173055128

server【 ​

详情页 ​

image-20241011224616887

接口 ​

说明 : 调用此接口 , 获取商品详情信息

请求方法 : GET

接口地址 : /oppoDetail

可选参数 :

json
type: 类型：oppo 、air、watch、tablet, 默认是oppo

调用例子 : baseURL + /oppoDetail?type=oppo

json
{
    "code": 200,
    "data": [
        {
            "id": 19978,
            "title": "Enco X 系列",
            "productDetailss": [
                {
                      "categoryCode": "000020",
                    "id": 21452,
                    "title": "OPPO Enco X2 镜夜黑 有线充版",
                    "marketingText": "45dB 降噪深度",
                    "skuId": 8687,
                    "skuName": "OPPO Enco X2 镜夜黑 有线充版",
                    .....
                }
            ]
        }
    ]
}

请求数据 ​

1、server：在~/server/detail.ts中发送请求

image-20241011181047458

2、组件：在~/oppo-details/index.ts中发送异步请求

image-20241011222856530

页面布局 ​

1、页面跳转：在index.vue中进行路由跳转

image-20241011180544384

2、页面布局

image-20241011224510907

image-20241011224517043

image-20241011224521377

打包部署 ​

打包项目 ​

1、执行pnpm run build命令打包项目，项目会打包到/.output/目录

注意： 打包 nuxt 项目时不能出现中文路径，主要因为Nitro不支持中文路径。

购买-阿里云服务器 ​

阿里云服务器购买地址：https://aliyun.com/

1、打开控制台

2、菜单找到：云服务器 ECS

3、创建我们 ECS

4、服务器的配置

  • CentOS 7.9 / 64
  • 2cpu 4G

5、配置安全组

6、系统配置，自定义密码

7、确认订单，创建实例

image-20240911153202733

连接-阿里云服务器 ​

1、VS Code 安装：Remote SSH 插件

image-20240911153214818

2、Remote SSH 连接远程服务器

image-20240911153223136

image-20240911153228309

image-20240911153233416

安装 Node ​

见： 安装 nodejs

安装 n ​

见：安装 n

安装 pm2 ​

见：安装 pm2